<template>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">

          <el-form-item label="用户 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>

          <el-form-item label="用户名称">
            <span>{{ props.row.userName }}</span>
          </el-form-item>

          <el-form-item label="电话号">
            <span>{{ props.row.phone }}</span>
          </el-form-item>

          <el-form-item label="邮箱">
            <span>{{ props.row.email }}</span>
          </el-form-item>

          <el-form-item label="昵称">
            <span>{{ props.row.nickName }}</span>
          </el-form-item>

          <el-form-item label="用户身份">
            <span>{{ props.row.note }}</span>
          </el-form-item>

          <el-form-item label="创建时间">
            <span>{{ props.row.createTime }}</span>
          </el-form-item>

          <el-form-item label="帐号启用状态">
            <span>{{ props.row.status=== 0 ? '未开启' : '开启' }}</span>
          </el-form-item>

          <el-form-item label="头像">
            <span><img :src="props.row.icon" width="60" height="60" class="head_pic"/></span>
          </el-form-item>

        </el-form>
      </template>
    </el-table-column>

    <el-table-column label="用户编号" prop="id"></el-table-column>
    <el-table-column label="用户名称" prop="userName"></el-table-column>
    <el-table-column label="电话号" prop="phone"></el-table-column>
    <el-table-column label="帐号启用状态" prop="status">
      <template slot-scope="scope">
        <span>{{scope.row.status === 0 ? '未开启' : '开启'}}</span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="primary" size="mini" round>修改</el-button>
        <el-button type="primary" size="mini" @click="deleteClick(scope.$index)" round>删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--  <el-table :data="tableData" border style="width: 100%">-->

  <!--    <el-table-column prop="id" label="用户编号" width="120" v-if="false"></el-table-column>-->
  <!--    <el-table-column prop="userName" label="用户名称" width="120"></el-table-column>-->
  <!--    <el-table-column prop="phone" label="电话号" width="120"></el-table-column>-->

  <!--    <el-table-column label="头像" width="120">-->
  <!--      <template slot-scope="scope">-->
  <!--        　<img :src="scope.row.icon" width="60" height="60" class="head_pic"/>-->
  <!--      </template>-->
  <!--    </el-table-column>-->

  <!--    <el-table-column prop="email" label="邮箱" width="120"></el-table-column>-->

  <!--    <el-table-column prop="nickName" label="昵称" width="120"></el-table-column>-->

  <!--    <el-table-column prop="note" label="用户身份" width="120"></el-table-column>-->

  <!--    <el-table-column fixed prop="createTime" label="创建时间" width="150"></el-table-column>-->

  <!--    <el-table-column fixed="right" label="操作" style="align-items: center">-->
  <!--      <template slot-scope="scope">-->
  <!--        <el-button @click="handleClick(scope.row)" type="primary" size="mini" round>修改</el-button>-->
  <!--        <el-button type="primary" size="mini" @click="deleteClick(scope.$index)" round>删除</el-button>-->
  <!--      </template>-->
  <!--    </el-table-column>-->

  <!--  </el-table>-->


</template>

<script>
  export default {
    name: 'ser',
    data () {
      return {
        tableData: [{
          id: '1',
          userName: '哈哈',
          phone: '王小虎',
          icon: 'http://image-img.oss-cn-chengdu.aliyuncs.com/2023-07-18/1689670899057_0f2f5c85-6e40-4429-bd28-dc81db7b0a49.jpg',
          email: '普陀区',
          nickName: '上海市普陀区金沙江路 1518 弄',
          note: 200333,
          createTime: '2016-05-02',
          status: 1
        },
          {
            id: '2',
            userName: '哈哈',
            phone: '王小虎',
            icon: 'http://image-img.oss-cn-chengdu.aliyuncs.com/2023-07-18/1689670899057_0f2f5c85-6e40-4429-bd28-dc81db7b0a49.jpg',
            email: '普陀区',
            nickName: '上海市普陀区金沙江路 1518 弄',
            note: 200333,
            createTime: '2016-05-02',
            status: 0
          }]
      }
    },
    methods: {
      handleClick (row) {
        //携带参数跳转页面
        this.$router.push({path: '/updateUser', query: {form: row}})
      },
      initCourse () {
        var data = {}
        this.$http.getRequest('user/wx/userQueryList', '').then(res => {
          console.log(res)
          this.tableData = res.data.data
        }).catch(err => {
          this.$message.info(err)
        })
      },
      /**
       * 删除数据
       * 根据下标获取元素
       * @param index
       */
      deleteClick: function (index) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //根据下标获取ID,将真实的id传给后端
          var userId = this.tableData[index].id
          var data = {
            userId: userId
          }
          this.$http.getRequest('user/wx/user/deleteUser', data).then(res => {
            if (res.data.code == 200) {
              //删除数组中下标的元素
              this.tableData.splice(index, 1)
              this.$message.success('恭喜！删除成功！')
            } else if (res.data.code == 403) {
              this.$message.info('没有相关权限！')
            } else {
              this.$message.info(res.data.message)
            }
          }).catch(err => {
            this.$message.info(err)
          })
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      }
    },
    mounted () {
      this.initCourse()
    },
  }
</script>

<style scoped>
  .head_pic {
    text-align: center;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    /*margin-left: 30px;*/
    width: 50%;
  }
</style>
